<template>
	<view class="pb-50 welcome">
		<u-navbar :title="i18n.lockming">
		</u-navbar>
		
		<view class="m-30 text-black">
			<text class="d-block font-size-40 text-center" style="color: #000;">{{i18n.l_alert_1}}</text>
			<view class="mt-60 mb-60 text-center font-size-20">
				<text style="color: #000;">{{i18n.l_alert_2}}</text>
			</view>
		</view>
		
		<view class="m-30">
			<view class="p-30 box-shadow border-radius-20 mb-20 bg-black text-white">
				<text class="d-block font-size-40 text-center mb-40" style="color: #000;">{{i18n.features}}</text>
				<view class="d-grid-columns-2">
					<view class="d-flex flex-direction-column align-items-center">
						<text class="d-block font-size-40 mb-24" style="color: #000;">{{i18n.onDemand}}</text>
						<text class="d-block font-size-34" style="color: #000;">{{i18n.dividendPeriod}}</text>
					</view>
					<view class="d-flex flex-direction-column align-items-center">
						<text class="d-block font-size-40 mb-24"  style="color: #000;">{{i18n.issuedDaily}}</text>
						<text class="d-block font-size-34"  style="color: #000;">{{i18n.currentInterest}}</text>
					</view>
				</view>
				<view class="d-grid-columns-3 mt-60">
					<view class="d-flex align-items-center flex-direction-column text-center">
						<image class="d-block" src="../../static/image/icon/setting-icon-3.png" mode="aspectFit" style="width:31px;height:36px;"></image>
						<text class="font-size-30 mt-12" v-html="i18n.feature_1"  style="color: #000;"></text>
					</view>
					<view class="d-flex align-items-center flex-direction-column text-center">
						<image class="d-block" src="../../static/image/nav/nav-4-active.png" mode="aspectFit" style="width:31px;height:34px;"></image>
						<text class="font-size-30 mt-12" v-html="i18n.feature_2"  style="color: #000;"></text>
					</view>
					<view class="d-flex align-items-center flex-direction-column text-center">
						<image class="d-block" src="../../static/image/nav/nav-2-active.png" mode="aspectFit" style="width:32px;height:32px;"></image>
						<text class="font-size-30 mt-12" v-html="i18n.feature_3"  style="color: #000;"></text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="m-30">
			<view class="p-30 box-shadow border-radius-20 mb-20 bg-black text-white">
				<text class="d-block font-size-40 text-center mb-40"  style="color: #000;">{{i18n.forInstance}}</text>
				<view>
					<text class="font-size-40"  style="color: #000;">{{i18n.incomeCalculation}}</text>
					<view class="mt-10 mb-10 font-size-30" v-html="i18n.forInstanceDesc"  style="color: #000;"></view>
				</view>
			</view>
		</view>
		
		<view class="m-30">
			<view class="p-30 box-shadow border-radius-20 mb-20 bg-black text-white">
				<text class="d-block font-size-40"  style="color: #000;">{{i18n.aboutLiquidatedDamages}}</text>
				<view class="mt-10 mb-10 font-size-30" v-html="i18n.aboutLiquidatedDamagesContent"  style="color: #000;"></view>
			</view>
		</view>
		
		<view class="m-30">
			<button class="warning-button mt-28"  style="color: #FFFFFF;"
              @click="goNow()">{{i18n.joinNow}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goNow() {
				let item = uni.getStorageSync('lockming') || {}
				if (item.currency_id) {
					this.$utils.jump('/pages/lockming/buy','redirectTo')
				} else {
					this.$utils.jump('/pages/lockming/lockming','redirectTo')
				}
			}
		},
		computed: {
			i18n() {
				return this.$t("lockming")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.welcome {
		background: #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100% 530rpx;
		background-position: left top;
	}
</style>
